<template>
    <div v-loading="loading">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-suffix="：">
            <el-form-item label="帐号" prop="username">
                <el-input v-model="form.username" placeholder="请输入帐号" />
            </el-form-item>
            <el-form-item label="名称" prop="nickname">
                <el-input v-model="form.nickname" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="form.mobile" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" placeholder="默认123456，编辑时留空则不处理用户密码" />
            </el-form-item>
            <el-form-item label="角色" prop="role_id">
                <div class="role-box">
                    <el-tree ref="roleTree" :data="roleList" default-expand-all show-checkbox :check-strictly="true" node-key="id" :props="defaultProps" @check-change="handleCheckChange" />
                </div>
            </el-form-item>
            <!-- 分成比例 -->
            <el-form-item v-auth="'divide.update'" label="分成比例" prop="proportion">
                <el-slider v-model="form.proportion" :max="1" :step="0.01" :format-tooltip="(value) => `${parseInt(value * 100)}%`" />
            </el-form-item>
            <el-form-item label="头像" prop="avatar_url">
                <ImageUpload :url.sync="form.avatar_url" notip :width="80" :height="80" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    props: {
        id: {
            type: [Number, String],
            default: ''
        }
    },
    data() {
        return {
            loading: false,
            form: {
                id: this.id,
                username: '',
                nickname: '',
                password: '',
                proportion: 0,
                mobile: '',
                avatar_url: '',
                role_id: [],
                status: 1
            },
            roleList: [],
            defaultProps: {
                label: 'title'
            },
            rules: {
                username: [{ required: true, message: '请输入帐号', trigger: 'blur' }],
                nickname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'change' },
                    { pattern: '^1[3456789]\\d{9}$', message: '请输入正确的手机号' }
                ],
                role_id: [{ type: 'array', required: true, message: '请选择账户的角色', trigger: 'change' }]
            }
        }
    },
    created() {
        this.getRoles()
    },
    mounted() {
        if (this.form.id != '') {
            this.getInfo()
        }
    },
    methods: {
        getInfo() {
            this.loading = true
            this.$api.post('member/member/detail', { id: this.form.id }).then(res => {
                this.loading = false
                const data = res.data.data
                this.form.username = data.username
                this.form.nickname = data.nickname
                this.form.mobile = data.mobile
                this.form.avatar_url = data.avatar_url
                this.form.status = data.status
                this.form.role_id = data.role_id
                this.form.proportion = Number(data.proportion || 0)
                this.$refs.roleTree.setCheckedKeys(data.role_id)
            })
        },
        submit(callback) {
            if (this.form.id == '') {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.$api.post('member/member/create', this.form).then(() => {
                            this.$message.success({
                                message: '新增成功',
                                center: true
                            })
                            callback && callback()
                        })
                    }
                })
            } else {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.$api.post('member/member/update', this.form).then(() => {
                            this.$message.success({
                                message: '编辑成功',
                                center: true
                            })
                            callback && callback()
                        })
                    }
                })
            }
        },
        getRoles() {
            this.$api.post('system/role/tabulation').then(res => {
                this.roleList = res.data.data
            })
        },
        handleCheckChange() {
            this.form.role_id = this.$refs.roleTree.getCheckedKeys()
        }
    }
}
</script>

<style lang="scss" scoped>
    // scss
    .role-box {
        padding: 5px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
    }
</style>
